//详情页

// 数据请求渲染
class Details{
    constructor(){
        this.smallPic=document.querySelector('.small_pic')
        this.bigPic=document.querySelector('.big_pic')
        this.details=document.querySelector('.details')
        this.price=document.querySelector('.price')
        this.current_price=document.querySelector('.current_price')
        this.title=document.querySelector('.right-title')
        this.category=document.querySelector('.category')
        this.cart_number=document.querySelector('.cart_number')
        this.details_bottom=document.querySelector('.details_bottom')
         //查看购物车数据
         this.list = JSON.parse(localStorage.getItem('cart')) || []

        //商品数量的增加或减少
         //获取元素
         this.div=$('.right')[0]
         this.sub=$('.sub')[0]
         this.add=$('.add')[0]
        


        this.init()
    }
    init(){
        this.request()
        // this.getQueryStr()
    }
    getQueryStr(name){
        // console.log(location.search)
        let id=location.search.slice(1)
        let obj={}
        let arr=id.split('=')
        obj[arr[0]]=arr[1]
        // console.log(obj)
        return obj[name]
    }
    request(){
        let myId=this.getQueryStr('id')
        if(!myId){
            location.href='../index.html'
            return false
        }else{
            //请求商品数据
            $.ajax({
                url:"../data/goods.json",
                type: 'get',        
                dataType: 'json',
            })
            .then(data=>{
               var  res=data.slice(500,700)
                // console.log(res)
                //对比商品数据获取当前选中的商品
                let goods=res.find(item=>{
                    return item.goods_id==myId
                })
                //调用渲染函数
                this.render(goods)
                //调用商品数量变化函数
                this.NumChange(goods)

                //goods 当前商品数据
                // console.log(goods)
            })
        }
    }
    //渲染页面
    render(data){
        this.smallPic.src=data.img_big_logo
        this.bigPic.src=data.img_big_logo
        this.title.innerHTML=data.title
        this.price.innerHTML = "¥"+data.price
        this.category.innerHTML=data.category
        this.cart_number.value=data.cart_number
        this.details_bottom.innerHTML=data.goods_introduce
        //数据持续化
        localStorage.setItem('cart', JSON.stringify(this.list))
    }

    //商品数量增加或者较少
    NumChange(goods){
        this.div.addEventListener('click',(e)=>{
            let target=e.target||e.srcElement
            //数量增加
            if(target.className=='add'){
                // console.log(goods)
                //判断库存
                if(goods.cart_number>=goods.goods_number){
                    alert('亲，你的数量超出了库存o')
                    return false
                }
                goods.cart_number++
                this.render(goods)
            }
            //数量减少
            if(target.className=='sub'){
                if(goods.cart_number==1){
                    return false
                }
                goods.cart_number--
                this.render(goods)
            }
            //加入购物车
            if(target.className=='addCart'){
                
                 //判断又没哟相同的商品数据
                 let res = this.list.some(item=>{return item.goods_id == goods.goods_id})
                 if(!res){
                    this.list.push(goods)
                    localStorage.setItem('cart',JSON.stringify(this.list))
                  
                 }
       
            }
        })
    }
}
new Details()


//放大镜功能
class Zoom{
    constructor(){
        //获取元素
        this.smallBox=document.querySelector('.small_box')
        this.mask=document.querySelector('.small_box>span')
        this.bigBox=document.querySelector('.big_box')
        this.pic=document.querySelector('.big_box>img')
    //    console.log(smallBox);
    //    console.log(mask);
    //    console.log(bigBox);
    //    console.log(pic);
        this.init()
    }
    init(){
        this.over()
        this.out()
        this.move()

    }
    over(){
        this.smallBox.onmouseover=()=>{
            this.mask.style.display='block'
            this.bigBox.style.display='block'
        }
    }
    out(){
        this.smallBox.onmouseout=()=>{
            this.mask.style.display='none'
            this.bigBox.style.display='none'
        }
    }
    move(){
        this.smallBox.onmousemove=(e)=>{
            let x=e.pageX-this.mask.offsetWidth/2-this.smallBox.offsetParent.offsetLeft
            // console.log(x)
            let y=e.pageY-this.mask.offsetHeight/2-this.smallBox.offsetParent.offsetTop
            // console.log(y)
            if(x<=0){
                x=0
            }else if(x>=this.smallBox.offsetWidth-this.mask.offsetWidth){
                x=this.smallBox.offsetWidth-this.mask.offsetWidth
            }

            if(y<=0){
                y=0
            }else if(y>=this.smallBox.offsetHeight-this.mask.offsetHeight){
                y=this.smallBox.offsetHeight-this.mask.offsetHeight
            }
            this.mask.style.left=x+'px'
            this.mask.style.top=y+'px'
            //计算比例
            let w=x/(this.smallBox.offsetWidth-this.mask.offsetWidth)
            let h=y/(this.smallBox.offsetHeight-this.mask.offsetHeight)
            //让大图移动
            this.pic.style.left = -w * (this.pic.offsetWidth - this.bigBox.offsetWidth) + 'px'
            this.pic.style.top = -h * (this.pic.offsetHeight - this.bigBox.offsetHeight) + 'px'
        }
    }
}
new Zoom()

